<template>
  <div>
        <h1>axios和json综合</h1>
        <input type="button" value="请求和响应都是普通字符串" @click="method01()"> <br>
        <input type="button" value="响应数据改成json字符串" @click="method02()"> <br>
        <input type="button" value="请求数据也改成json字符串" @click="method03()"> <br>
        <hr>
        <h3>好友列表</h3>
        <div id="messageDiv"></div>
        <table width="500px" cellspacing="0px" cellpadding="5px" border="1px" id="myTable">
            <tr>
                <th>id</th>
                <th>name</th>
                <th>age</th>
            </tr>
            <!-- <tr>
                <td></td>
                <td></td>
                <td></td>
            </tr>-->
        </table>
  </div>
       
</template>

<script>
import axios from 'axios'
export default {
  methods: {
    //1.请求和响应都是普通字符串
    method01(){
      let url="/fastJsonServlet01";
      let ss="username=ls&age=23";
      axios.post(url,ss).then(response=>{
      console.log(response.data,)

      });
       
    },
    //2.请求是普通字符串，响应数据改成json字符串
    method02(){
      let url="/fastJsonServlet02";
      let ss="username=ls&age=23";
      axios.post(url,ss).then(response=>{
      let arr=response.data;
      
      let contont='';
      for (const aa of arr) {
        contont+=`<tr>
                <td>${aa.id}</td>
                <td>${aa.username}</td>
                <td>${aa.age}</td>
                </tr>`;;
      }
      document.getElementById("myTable").innerHTML += contont;
              
      });  
    },
    //3.请求是json字符串，响应数据改成json字符串
    method03(){
        let url="/fastJsonServlet03";
        let ss={"username":"ls","age":"23"};
    
      axios.post(url,ss).then(response=>{
        let arr=response.data;
      
      let contont='';
      for (const aa of arr) {
        contont+=`<tr>
                <td>${aa.id}</td>
                <td>${aa.username}</td>
                <td>${aa.age}</td>
                </tr>`;;
      }
      document.getElementById("myTable").innerHTML += contont;

         });
    }
  }
}
</script>

<style>

</style>
